<template>
    <div>
        <el-tabs v-model="activeName" addable>
            <template #add-icon>
                <el-icon @click="checkTabs">
                    <Filter />
                </el-icon>
            </template>
            <el-tab-pane label="设备概览" name="first">
                <component v-if="activeName === 'first'" :is="equipmentOverview" :systemId="systemId" />
            </el-tab-pane>
            <el-tab-pane v-for="item in childMenu" :key="item.systematicId" :label="item.systematicName"
                :name="item.systematicId">
                <component v-if="activeName === item.systematicId" :is="systemMonitoring"
                    :systemId="item.systematicId" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import equipmentOverview from './components/equipment-overview.vue'
import systemMonitoring from './components/system-monitoring.vue'
import selectTabsList from './components/select-tabs-list.vue'
import { getSubSystemList } from '@/api/operate/application-system'
import { Filter } from '@element-plus/icons-vue'
import { addDialog } from '@/components/ReDialog'
import { cloneDeep, deviceDetection } from '@pureadmin/utils'
const route = useRoute()
const pathList = route.fullPath.split('/')
const systemId = pathList[pathList.length - 1]
const activeName = ref('first')
const childMenu = ref([])
onBeforeMount(() => {
    getSubSystemList({ systematicId: systemId }).then((res) => {
        childMenu.value.push(...res.result)
        // for (let index = 4; index <= 500; index++) {
        //     childMenu.value.push({ systematicId: `${index}`, systematicName: `标签${index}` })
        // }
    })
})

const checkTabs = () => {
    let tabRef = ref()
    let list = cloneDeep(childMenu.value)
    list.unshift({ systematicId: 'first', systematicName: '设备概览' })
    addDialog({
        title: `二级系统选择`,
        width: "1100px",
        draggable: true,
        props: {
            list: list,
            activeName: activeName.value
        },
        fullscreen: deviceDetection(),
        fullscreenIcon: true,
        closeOnClickModal: false,
        contentRenderer: () => h(selectTabsList, { ref: tabRef }),
        beforeSure: (done, { options }) => {
            activeName.value = tabRef.value.getCheckedItem()
            done()
        }
    });
}

</script>
<style lang="scss" scoped>
.main-content {
    width: calc(100% - 32px);
    min-height: calc(100% - 32px) !important;
}
</style>